<lv-advanced-filter [lvFields]="fields" (lvOnChange)="onChange($event)"></lv-advanced-filter>

<ng-template #UsageTemplate let-value="value">
  <lv-group lvDirection="vertical" lvGutter="0.08rem">
    <p>Capacity Usage</p>
    <lv-group lvGutter="0.08rem">
      <lv-spinner [(ngModel)]="value.filterValue" lvOnlyInput="true"></lv-spinner>
      <span>%</span>
    </lv-group>
  </lv-group>
</ng-template>

<ng-template #NameTemplate let-value="value">
  <lv-group lvDirection="vertical" lvGutter="0.08rem">
    <p>Name include</p>
    <input [(ngModel)]="value.filterValue" lv-input />
  </lv-group>
</ng-template>

<ng-template #AddressTemplate let-value="value" let-onCancel="onCancel" let-onConfirm="onConfirm">
  <lv-group lvDirection="vertical" lvGutter="0.08rem" style="padding: 0.16rem">
    <p>Address startsWith</p>
    <input [(ngModel)]="value.filterValue" lv-input />
    <lv-group lvGutter="0.16rem" style="justify-content: 'flex-end'; margin-top: 0.16rem; width: 100%;">
      <button lv-button (click)="onCancel()">取消</button>
      <button lv-button (click)="onConfirm()" lvType="primary">确定</button>
    </lv-group>
  </lv-group>
</ng-template>

<ng-template #dateFilterTpl let-value="value" let-onCancel="onCancel" let-onConfirm="onConfirm">
  <lv-date-range-picker
    [(ngModel)]="value.filterValue"
    [(ngModel)]="rangeDate"
    [lvInline]="true"
    [lvFooterExtra]="footerTpl"
    [lvShowTime]="true"
    [lvCurrentInput]="currentInput"
    (lvRangeTagChange)="rangeTagChange($event)"
    #dateRangePicker
  ></lv-date-range-picker>
  <ng-template #footerTpl>
    <lv-group lvGutter="16px" style="justify-content: flex-end; margin-top: 0.16rem; margin-right: 0.16rem; margin-bottom: 0.16rem;">
      <button lv-button (click)="onCancel()">Cancel</button>
      <button lv-button lvType="primary" [disabled]="disableOk()" (click)="onOk(onConfirm)">{{ getOkLabel() }}</button>
    </lv-group>
  </ng-template>
</ng-template>